<template>
  <div class="container">
    <!--  帖子详情界面-->
<!--    返回上一页、帖子标题-->
    <!--  返回-->
    <van-nav-bar
        :title="nodeList.title"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
<!--    帖子作者信息-->
    <router-link tag="div" class="userInfo" :to="{path:'/author_detail',query:{userId:nodeList.userId}}">
      <img :src="nodeList.avatar" alt="">
      <span>{{nodeList.userName}}</span>
    </router-link>
    <div style="border: 1px solid #cdcdcd">
      <!--    帖子图片-->
      <img class="nodeImg" :src="nodeList.coverImgUrl" alt="">
      <!--    帖子内容-->
      <div class="content">
        <p>{{nodeList.intro}}</p>
        <span style="font-size: 10px;float: right">{{nodeList.createTime}}</span>
        <div style="clear: both"></div>
      </div>
    </div>
<!--    评论发表-->
    <div class="toComment">
      <van-field
          v-model="message"
          rows="2"
          autosize
          label="留言:"
          type="textarea"
          maxlength="50"
          placeholder="请输入留言"
          show-word-limit
      />
      <van-button style="float: right" type="primary" size="mini" @click="publish"> 发表言论 </van-button>
      <div style="clear:both;"></div>
    </div>
<!--    评论列表-->
    <div class="commentList" v-if="!(comment=='')">
      <div  @click="showMore" class="commentNum">{{comment.length}}条评论(点击显示)--->>></div>
      <div v-if="showNum>0">
        <comment v-for="item in comment" :key="item.commentId+'0'" :comment="item"></comment>
      </div>
    </div>
  </div>
</template>

<script>
import {postComment, getNodeDetail, gitCommentList,delComment} from '../api/api'
import { Dialog,Toast } from 'vant';
import comment from "@/components/Comment";
export default {
  name: "NodeDetail",
  data(){
    return {
      nodeList:[],
      comment:[],
      message:'',
      showNum:0,
    }
  },
  components:{
    comment
  },
  methods:{
    //评论删除
    del(commentId){
      Dialog.confirm({
        title: '是否删除该评论？',
      })
          .then(() => {
            //确定后删除
            delComment(commentId).then()
            //刷新评论
            gitCommentList(this.$route.query.postsId).then(res=>this.comment=res.rows)
          })
          .catch(() => {
            // on cancel
          });
    },
    //评论
    publish(){
      //是否登录
      if(this.$store.state.isLogin){
        //是否有评论信息
        if(!this.message==""){
          //评论
          postComment(this.nodeList.postsId,this.message).then(res=>{
            if(res.code=='0'){
              Toast.success('评论成功');
              this.message=""
            }
          });
          //刷新评论
          gitCommentList(this.$route.query.postsId).then(res=>this.comment=res.rows)
        }else{
          //无评论信息反馈
          Toast.fail('请输入要评论的文字');
        }
      }else{
        //没有登陆时
        Dialog.confirm({
          title: '亲亲！没有登陆呢！！',
          confirmButtonText:'去登陆',
          cancelButtonText:'我再看看',
        })
            .then(() => {
              // 确定   返回登录页
              this.$router.push('/login')
            })
            .catch(() => {
              // on cancel
            });
      }

    },
    showMore(){
      if(this.showNum<=0){
        this.showNum=this.comment.length
      }else{
        this.showNum=0
      }
    },
    onClickLeft() {
      window.history.go(-1);
    },
  },
  created() {
    //获取帖子详情
    getNodeDetail(this.$route.query.postsId).then(res=>this.nodeList=res.data)
    //获得评论
    gitCommentList(this.$route.query.postsId).then(res=>this.comment=res.rows)
  }
}
</script>

<style scoped lang="less">
.container {
  margin-bottom: 60px;
  //品论列表
  .commentList {
    margin-bottom: 50px;
    //评论条数
    .commentNum {
      font-size: 14px;
      margin: 10px;
      color: grey;
    }
  }
  p {
    margin: 0;
  }
  //用户信息
  .userInfo{
    padding: 10px;
    display: flex;
    align-items: center;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      box-shadow: 0 0 5px black;
    }
    span {
      color: gray;
      font-size: 12px;
      margin-left: 20px;
    }
  }
  //图片内容
  .nodeImg {
    width: 100%;
  }
//  帖子文字内容
  .content {
    padding: 10px;
      p {
        font-size: 14px;
        text-indent: 2em;
      }
  }
  //评论框
  .toComment {
    border: 1px solid #cbd5d5;
    border-radius: 5px;
    font-size: 14px;
    margin: 20px;
    padding: 5px;
    /deep/.van-field__label {
      width: 33px;
      display: flex;
      align-items: center;
      background-color: #eeeeee;
      border-radius: 5px;
    }
  }
//  评论
  .comment {
    margin: 0 20px 10px;
    padding: 5px;
    box-shadow: -0.5px 0.5px 2px #c9c9c9;
    position: relative;
    //评论者信息、删除
    .commentAuthor {
      display: flex;
      align-items: center;
      margin: 5px 0;
      //评论者头像
      img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        box-shadow: 0 0 5px #375700;
      }
      //评论者名字
      span {
        margin-left: 20px;
        font-size: 12px;
        color: gray;
      }
    }
    //评论内容
    .comments {
      margin-left: 30px;
      font-size: 14px;
    }
    //删除按钮
    .del {
      position: absolute;
      right: 10px;
      font-size: 18px;
    }
    //回复按钮
    .commentReplay {
      span {
        float: right;
        display: inline-block;
        padding: 2px 5px;
        border: 1px solid #d5d5d5;
        border-radius: 5px;
        font-size: 10px;
        i {
          margin-left: 3px;
        }
      }
    }
  }
}
</style>